iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
0
Modern Web

Hugo 貼身打造個人部落格系列 第 19

Day 19. Hugo Content 使用圖源、壓縮與工具介紹

  • 分享至 

  • xImage
  •  

前言

筆者喜歡放一張「有意境」的插圖來點綴文章,若插圖夠貼近主題,也可以加深讀者的印象。

今天講的相對輕鬆一點,就是介紹筆者會去哪邊找插圖來放、放哪、怎麼放、有沒有使用限制、會不會被吉,以及圖片太肥會怎麼處理等。

圖片來源

以下介紹幾個筆者常用的圖片素材網站,並列出各自的 License (授權使用須知):

unsplash

  • 官方網址:https://unsplash.com/
  • License 原文 (筆者用自己的理解翻譯如下):

允許的

  • 所有圖片都可以免費下載、免費使用
  • 可用於商業、非商業目的
  • 無需特別取得使用許可 (但若有,官方表示讚賞)

禁止的

若你有其他問題,可以到官方的 Q&A 頁面查找。

pixabay

  • 官方網址:https://pixabay.com/
  • 支援繁體中文搜索
  • License 原文 (筆者用自己的理解翻譯如下):

允許的

  • 除了下列禁止的事情之外,可以免費下載、免費使用
  • 可用於商業、非商業目的
  • 無需特別取得使用許可 (但若有,官方表示讚賞)
  • 允許修改從網站取得的任何內容

禁止的

  • 請勿直接把圖片搬去別的平台販售
  • 請勿未經修改、把圖片完整複製,做成像是印刷品、海報來販售
  • 不要惡搞、醜化具有可識別人物的圖片
  • 不得暗示圖像中的人物、品牌,為你的產品或服務背書

若你有其他問題,可以到官方的 Q&A 頁面查找。

pexels

  • 官方網址:https://www.pexels.com/zh-tw/
  • 支援繁體中文搜索
  • License 說明如下:

允許的

  • 所有相片和影片均可免費使用
  • 無需註明相片來源,但官方非常歡迎你回饋那顆感恩的心給作者知道
  • 歡迎修改圖片,盡情發揮你的創意

禁止的

  • 不允許惡搞醜化,或以冒犯方式,呈現可識別身分的人物
  • 不允許販售沒改過的相片、影片,例如:沒修改就拿來用於海報、印刷品,或是實體產品上
  • 不得暗示圖像中的人物,或是品牌,為你的產品背書
  • 不得搬磚出去,或是搬磚進來,重新散佈、販售

圖源小結

幾個看下來之後,你會發現,其實這類圖源平台所載明的 License 都大同小異,筆者認為只要「在常識範圍內」使用是 ok 的 XD。

圖片壓縮

網站放太多圖,圖片每張都好幾 MB 時,第一次造訪你的網站的人,或是有些人習慣禁用快取 (無痕起手),甚至你放圖的地方沒有良好的 CDN,都會讓你的網站一打開就世~界~慢!

這節要介紹若是你的圖片本身容量太大,可以透過線上壓縮服務,將圖片尺寸降低,在套用到文章做使用,網站速度就能加快很~多。

檔案大小:10 MB -> 100 KB

標題是舉個例子,這邊說的壓縮變小,有「檔案大小」變小,以及「圖片長寬」變小兩種含義。

筆者都是使用 https://compressor.io/ 來縮小圖片,除了基本的批次轉換之外,若有需要,還可以調節輸出圖片的細部參數,例如:保證圖片質量 (Image quality)、圖片長寬 (Resize) 等,壓縮效果還蠻不錯的,壓縮率高,而且圖片幾乎看不出有被破壞。

圖片長寬:4096×2160 -> 1920×1080

筆者使用 https://www.befunky.com/ 這個線上服務進行圖片長寬的調整,但這只是其中一個免費功能,該服務還提供了各種修圖工具 (免費及付費),輸出時也能調節 Image quality,而且能即時看到調節後輸出的畫面呈現,與檔案大小預估等,非常方便。

上傳圖片工具 PicGo

先說,如果不使用第三方圖床,而是偏向把圖檔資源,直接放在專案底下,可略過這節介紹。

PicGo 是一款圖片上傳管理工具,他整合許多圖床 (雲端讓你放圖的地方),使用者可以無痛的把圖丟到任何一個有支援的雲端平台上,若沒有支援,可以參照官方說明整合一個。

介面長這樣:


設置圖床 token:

這工具筆者使用到目前,只有一個比較不方便的地方,就是它在刪除圖片時,與對應遠端的那張圖片,是不會被連動刪除的,不過若是不 care 的話,整體來說是很方便的。

小結

翻譯理解有問題的話,請不用客氣留言說一下,感謝。

參考連結


上一篇
Day 18. Hugo Site 自動部署 - 使用 Bash Shell Script
下一篇
Day 20. Hugo Comments System
系列文
Hugo 貼身打造個人部落格30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言